import './index.less';
import {ProjectSizeItem, ProjectSizeProps} from './interface';
import React, {useEffect, useState} from 'react';
import {Editable, EditableInput, EditablePreview, Flex} from '@chakra-ui/react';
export * from './interface';
export const ProjectSize = (props: ProjectSizeProps) => {
    const [activeSize, setActiveSize] = useState('web');
    const projectSizes: ProjectSizeItem[] = [
        {
            text: '网站',
            key: 'web',
            height: 937,
            width: 1920,
            svg: (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 45" aria-hidden="true" width="58" height="46">
                    <path
                        d="M54 0a4 4 0 014 4v37a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4h50zm2 7.357H2V41a2 2 0 001.85 1.995L4 43h50a2 2 0 001.995-1.85L56 41V7.357zM5 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z"
                        fill="#415058"
                    />
                </svg>
            )
        },
        {
            text: '大屏',
            key: 'fullPage',
            height: 1080,
            width: 1920,
            svg: (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 45" aria-hidden="true" width="58" height="46">
                    <path
                        d="M54 0a4 4 0 014 4v37a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4h50zm2 7.357H2V41a2 2 0 001.85 1.995L4 43h50a2 2 0 001.995-1.85L56 41V7.357zM5 3a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2zm4 0a1 1 0 100 2 1 1 0 000-2z"
                        fill="#415058"
                    />
                </svg>
            )
        },
        {
            text: '移动端',
            key: 'mobile',
            height: 812,
            width: 375,
            svg: (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 50" aria-hidden="true" width="31" height="50">
                    <path
                        d="M27 0a4 4 0 014 4v42a4 4 0 01-4 4H4a4 4 0 01-4-4V4a4 4 0 014-4h23zm0 2h-2.662a2.957 2.957 0 01-2.91 2.433H9.607a2.957 2.957 0 01-2.91-2.432L4 2a2 2 0 00-1.995 1.85L2 4v42a2 2 0 001.85 1.995L4 48h23a2 2 0 001.995-1.85L29 46V4a2 2 0 00-1.85-1.995L27 2z"
                        fill="#415058"
                    />
                </svg>
            )
        },
        {
            text: '自定义',
            key: 'custom',
            height: 937,
            width: 1920,
            svg: (
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" aria-hidden="true" width="36" height="36">
                    <path d="M20 0v16h16v4H20v16h-4V20H0v-4h16V0h4z" fill="#415058" />
                </svg>
            )
        }
    ];
    useEffect(() => {
        const result = projectSizes.find((item) => item.key === activeSize);
        result && props.getResult(result);
    }, [activeSize]);
    return (
        <Flex alignItems="center" justifyContent="space-between" margin="15px 0">
            {projectSizes.map((item, index) => {
                return (
                    <div
                        key={index + ''}
                        className={`size-item p-col-20 ${activeSize === item.key ? 'active-size' : ''}`}
                        onClick={() => {
                            setActiveSize(item.key);
                        }}>
                        {item.svg}
                        <span className="item-text">{item.text}</span>

                        {item.key === 'custom' ? (
                            <div className="tip-text custom-tip">
                                <Editable defaultValue={item.width + ''}>
                                    <EditablePreview />
                                    <EditableInput />
                                </Editable>
                                {'*'}
                                <Editable defaultValue={item.height + ''}>
                                    <EditablePreview />
                                    <EditableInput />
                                </Editable>
                            </div>
                        ) : (
                            <span className="tip-text">
                                {item.width} * {item.height}
                            </span>
                        )}
                    </div>
                );
            })}
        </Flex>
    );
};
export default ProjectSize;
